<template>
    <div class="learning-container">
      <var-loading :loading="loading" style="width: 100%;height: 100%">
        <var-app-bar>
          <template #left>
            <var-button
                round
                text
                color="transparent"
                text-color="#fff"
                @click="goBack"
            >
              <var-icon name="chevron-left" :size="24" />
            </var-button>
          </template>
        </var-app-bar>
        <div class="learning-content">
          <h1 style="font-weight: 700;font-size: 40px;color: #151515;padding-top: 20%">{{word.word}}</h1>
          <h3
            v-show="tip"
            style="margin-top: 10px"
          >{{word.sentence}}</h3>
          <h3
              v-show="tip"
          >{{word.sentenceTranslate}}</h3>
          <h2
            v-show="trans"
            >{{word.translate}}</h2>
          <div class="foot">
            <div style="display: flex;flex-direction: column">
              <var-button
                  class="btn1"
                  @click="button1"
              >{{trans?'下一个单词':'我认识'}}</var-button>
              <var-button
                  class="btn2"
                  @click="button2"
                  v-show="!trans"
              >{{tip?'查看释义':'提示一下'}}</var-button>
            </div>
          </div>
        </div>
      </var-loading>
    </div>
</template>

<script lang="ts" setup>
import router from "@/router";
import {onMounted, ref} from "vue";
import {learning, study} from "@/api/studyAPI";
import {WordModel} from "@/model/wordModel";
import {Dialog} from "@varlet/ui";
import store from "@/store";



const loading = ref(true);
const words = ref<WordModel[]>([]);
const wordIndex = ref(0);
const tip = ref(false);
const trans = ref(false); //是否进入翻译页
let word: WordModel = {};
/*
  判断单词是否背熟，每个wordArr的index对应words的index。
  背诵规则:
    wordArr存放的是每个单词的出现次数，初始值均为1.
    当第一次遇见这个单词，则单词--，之后不再复习
    如果第一次遇见这个单词不会（点击bt2），则这个单词之后出现次数++；
 */
let wordArr: number[] = [];

const goBack = () => {
  Dialog("中途退出会导致背诵单词数据失效")
      .then((res) => {
        if (res === 'confirm') {
          router.push('/main/study')
        }
      })
}
const changeWord = () => {
  word = words.value[wordIndex.value];
}
//该函数判断单词是否全部背完，既wordArr全部为0
const checkIsEnd = () => {
  for (let i = 0; i < wordArr.length; i++) {
    if (wordArr[i] !== 0) return false;
  }
  return true;
}
const getWordIdJson = () => {
  let json = "[";
  for (let i = 0; i < words.value.length; i++) {
    json += words.value[i].id;
    if (i !== words.value.length - 1) {
      json += ",";
    } else {
      json += "]";
    }
  }
  return json;
}
const button1 = () => {
  //如果没进入翻译页面
  if (!trans.value) {
    //如果没进入tip页面
    if (!tip.value) {
      wordArr[wordIndex.value]--;
    } else {  //如果进了，则++
      wordArr[wordIndex.value]++;
    }
    tip.value = false;
    trans.value = true;
  } else {    //当进入翻译页面后，按钮显示背诵下一个单词，这个时候需要判断单词是否背完
    //如果单词背完了，弹出提示框，显示背诵的单词，并跳转到主页面
    if (checkIsEnd()) {
      Dialog("恭喜你，今天的单词已全部背诵完成");
      let formData = new FormData();
      formData.set("uId" , sessionStorage.getItem("user"));
      formData.set("wordIdsJson" , getWordIdJson());
      study(formData);
      router.push("/main/study");
    } else {  //如果单词没背完
      // eslint-disable-next-line no-constant-condition
      while (true) {
        wordIndex.value++;
        if (wordIndex.value >= wordArr.length) {
          wordIndex.value = 0;
        }
        if (wordArr[wordIndex.value] !== 0) {
          break;
        }
      }
      changeWord();
    }
    tip.value = false;
    trans.value = false;
  }
}
const button2 = () => {
  if (!tip.value) {
    tip.value = true;
  } else {
    button1();
  }
}
onMounted(() => {
  learning(store.state.wordLimit)
      .then(res => {
        console.log(res);
        for (let i = 0 ; i < res.data.length ; i++) {
          let word: WordModel = {
            id: res.data[i].id,
            word: res.data[i].word,
            translate: res.data[i].translate,
            sentence: res.data[i].sentence,
            sentenceTranslate: res.data[i].sentenceTranslate
          }
          words.value.push(word);
          wordArr.push(1);
        }
        changeWord();
      })
      .finally(() => {
        loading.value = false;
      })
})
</script>

<style scoped>
.learning-container{
  width: 100%;
  height: 100%;
}
.learning-content{
  text-align: center;
  position: relative;
  width: 100%;
  height: 80%;
}
.foot{
  position: absolute;
  top: 90%;
  width: 100%;
}
.btn1{
  font-size:16px;color:white;border-radius:25px;height:40px;width: 80%;margin-left: 10%;margin-bottom: 5%;background-color:rgb(40,191,160);
}
.btn2{
  font-size:16px;
  color:white;
  border-radius:25px;
  height:40px;
  width: 80%;
  margin-left: 10%;
  background-color:rgb(254,147,91);
}
</style>